<template>
  <el-dialog v-if="dialogShow" v-model="dialogShow" title="历史任务选择" width="1000px">
    <el-form ref="queryFormRef" :model="queryParams" :inline="true" size="small" label-width="80">
      <el-form-item label="任务名称" prop="loadExperimentName">
        <el-input v-model="queryParams.loadExperimentName" placeholder="请输入版本号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="载荷分类" prop="loadType">
        <el-select v-model="queryParams.loadType" clearable>
          <el-option v-for="(item, index) in pageLoadTypes" :key="'name' + index" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="阶段" prop="stage">
        <el-select v-model="queryParams.stage" clearable>
          <el-option v-for="(item, index) in pageStages" :key="'stage' + index" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="版本号" prop="version">
        <el-input v-model="queryParams.version" placeholder="请输入版本号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item style="padding-left: 80px">
        <el-button size="small" type="primary" @click="handleQuery">查询</el-button>
        <el-button size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableDatas" highlight-current-row @current-change="handleCurrentChange">
      <el-table-column label="序号" width="50" type="index" align="center">
        <template #default="scope">
          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务名称" align="center" prop="loadExperimentName"></el-table-column>
      <el-table-column label="载荷分类" align="center" prop="loadType"></el-table-column>
      <el-table-column label="阶段" align="center" prop="stage"></el-table-column>
      <el-table-column label="版本号" align="center" prop="version" />
      <el-table-column label="状态" align="center" prop="state" width="200"></el-table-column>
      <el-table-column label="创建人" align="center" prop="createBy" />
      <el-table-column label="创建日期" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100" fixed="right">
        <template #default="scope">
          <el-button type="text" @click="handleCurrentChange(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagenation">
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        layout="prev, pager, next,jumper"
        :total="total"
        @pagination="getList"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSure">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="taskSelectDialog" lang="ts">
import { getExperimentList } from '@/api/loadProcessingAlgorithm/loadTaskManagement/index';
import { loadNames, stages } from '@/api/loadProcessingAlgorithm/index';
const dialogShow = ref(false);
const currentRow = ref();
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  loadExperimentName: '',
  loadType: '',
  stage: '',
  version: '',
  state: '已完成'
});
import { dataQuery, dataVO } from '@/api/loadProcessingAlgorithm/loadTaskManagement/type';
const tableDatas = ref<dataVO[]>([]);
const pageLoadNames = ref(loadNames);
const pageLoadTypes = ref([]);
const loading = ref(false);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const pageStages = ref(stages);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['on-sure']);
const openDialog = async () => {
  await getList();
  dialogShow.value = true;
};
const closeDialog = () => {
  dialogShow.value = false;
};
const getLoadTypes = () => {
  pageLoadNames.value.forEach((item) => {
    pageLoadTypes.value = [...pageLoadTypes.value, ...item.children];
  });
};
/** 查询模型列表 */
const getList = async () => {
  loading.value = true;
  const response = await getExperimentList(queryParams);
  tableDatas.value = response.rows;
  total.value = response.total;
  loading.value = false;
};
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  queryFormRef.value?.resetFields();
  handleQuery();
}
const handleCurrentChange = (val) => {
  currentRow.value = val;
};
const handleSure = () => {
  if (currentRow.value) {
    emit('on-sure', currentRow.value);
    closeDialog();
  } else {
    proxy?.$modal.msgWarning('请选择数据！');
  }
};
onMounted(() => {
  getLoadTypes();
});
defineExpose({
  openDialog
});
</script>

<style></style>
